# Display

Display (opens new window) 模块描述了如何从文档元素树生成 CSS 格式化盒树，并定义了控制该过程的 display (opens new window) 属性。

# 一、盒布局模式

外部显示类型决定元素是否被视为块级或行内盒子，以及它在文档流中的表现方式。

内部显示类型则决定子元素的布局方式，例如流式布局、网格布局或弹性布局。

display-outside (opens new window) 规定元素的外部显示类型，实际上就是其在流式布局中的角色。

block

block (opens new window) 定义元素生成一个块级盒子。在正常的流中，该元素之前和之后产生换行。
```
p {
  display: block;
}
```

none

none (opens new window) 定义元素及其子元素不生成 Box 或文本序列。
```
p {
  display: none;
}
```
inline-block

inline-block (opens new window) 定义元素为行内块级元素。

它结合了行内元素和块级元素的特性，使得元素既可以在行内显示，又可以设置宽度、高度等属性，从而在行内形成块状布局。
```
span {
  display: inline-block;
  width: max-content;
  height: auto;
  border: 1px solid black;
  margin-bottom: 10px;
}
```

visibility (opens new window) 属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 table 中的行或列。

span {
  visibility: hidden;
}